<template>
  <div class="TabsBox">
    <el-tabs v-model="activeName" v-if="show">
      <template v-for="item in tableDataFn">
        <el-tab-pane :label="item.label" :name="item.name" :key="item.name">
          <span slot="label"
            >{{ item.label }}
            <!-- <el-badge :value="12"></el-badge> -->
          </span>
        </el-tab-pane>
      </template>
    </el-tabs>
  </div>
</template>

<script>
import bus from "common/bus";
import tabItems from "./tabItems.js";
import { getUserData } from "@/utils/IndexedDB.js";
export default {
  data() {
    return {
      show: false,
      activeIndex: this.$route.meta.menu,
      activeName: "",
      tabItems: tabItems,
      userType: "",
    };
  },
  created() {
    
   
    this.activeNameInit();
    // bus.$on('activeName', msg => {
    //     console.log(msg)
    //     this.activeName = msg;
    // });
  },
  mounted() {
    
  },
  updated() {},

  methods: {
     activeNameInit() {
       
       getUserData("userBase", "infoBase", 0).then((res) => {
        this.userType = res.ms_type;
        
        
         if (this.tabItems.hasOwnProperty(this.activeIndex)) {
        this.show = true;
        // let _oldName = this.$route.name;
        let _oldName=this.tableDataFn[0].name?this.tableDataFn[0].name:this.$route.name
        // console.log(_oldName,53)

        if (
          this.tabItems[this.activeIndex].some(
            (item, index) => _oldName == item.name
          )
        ) {
        //   this.activeName = _oldName;
        // console.log(this.tableDataFn[0].name,'88')
         
          this.activeName=this.tableDataFn[0].name
          // this.activeName=this.getTableItem()[0].name

          return;
        }else{
          // console.log(880)
        }

        this.activeName = this.tabItems[this.activeIndex][0].name;
        // console.log(this.tableDataFn[0])
      } else {
        this.show = false;
        this.activeName = this.activeIndex;
        // console.log(this.activeName)
      }


      });

     
    },

    //  getTableItem() {
    //   return  this.tabItems[this.activeIndex].filter((item) => {
  
    //     if (item.permission) {
    //       return item.route.includes(this.userType);
    //     }

    //     return item;
    //   });
    // },
  },
  computed: {
    tableDataFn() {
      if(!this.tabItems[this.activeIndex]){return ''}
      return this.tabItems[this.activeIndex].filter((item,index) => {
        if (item.permission) {
          return item.route.includes(this.userType);
        }
        if(item.Steamtype&&sessionStorage.getItem('ISWindows')){
          //不return
        }else if(item.Linktype&&sessionStorage.getItem('ISSNMP')){
          console.log('t')
          //不return
        }else{
          return item;
        }
        
        
      });
    },
  },
  watch: {
    "$route.meta.menu": function (val, oldVal) {
      this.activeIndex = val;
      this.activeNameInit();
    },
    activeName: function (val, oldVal) {
      if (val != oldVal) {
        this.$router.push({
          name: val,
        });
      }
    },
  },
};
</script>

<style scoped>
.TabsBox {
  /* border: 1px solid rgb(235, 13, 13); */
}
</style>